import * as React from "react";

import Config from "../../config";
import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
import { showMessage } from "../../render/MessageNotice";

export interface UnsubmittedVideosListItemProps {
    videoID: string;
    children?: React.ReactNode;
}

export interface UnsubmittedVideosListItemState {}

class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItemProps, UnsubmittedVideosListItemState> {
    constructor(props: UnsubmittedVideosListItemProps) {
        super(props);

        // Setup state
        this.state = {};
    }

    render(): React.ReactElement {
        const segmentCount = Config.local.unsubmittedSegments[this.props.videoID]?.length ?? 0;

        return (
            <>
                <tr id={this.props.videoID + "UnsubmittedSegmentsRow"} className="categoryTableElement">
                    <td id={this.props.videoID + "UnsubmittedVideoID"} className="categoryTableLabel">
                        <a
                            href={`https://www.bilibili.com/video/${this.props.videoID}`}
                            target="_blank"
                            rel="noreferrer"
                        >
                            {this.props.videoID}
                        </a>
                    </td>

                    <td id={this.props.videoID + "UnsubmittedSegmentCount"}>{segmentCount}</td>

                    <td id={this.props.videoID + "UnsubmittedVideoActions"}>
                        <div
                            id={this.props.videoID + "ExportSegmentsAction"}
                            className="option-button inline low-profile"
                            onClick={this.exportSegments.bind(this)}
                        >
                            {chrome.i18n.getMessage("exportSegments")}
                        </div>{" "}
                        <div
                            id={this.props.videoID + "ExportSegmentsAsURLAction"}
                            className="option-button inline low-profile"
                            onClick={this.exportSegmentsAsURL.bind(this)}
                        >
                            {chrome.i18n.getMessage("exportSegmentsAsURL")}
                        </div>{" "}
                        <div
                            id={this.props.videoID + "ClearSegmentsAction"}
                            className="option-button inline low-profile"
                            onClick={this.clearSegments.bind(this)}
                        >
                            {chrome.i18n.getMessage("clearTimes")}
                        </div>
                    </td>
                </tr>
            </>
        );
    }

    clearSegments(): void {
        if (confirm(chrome.i18n.getMessage("clearThis"))) {
            delete Config.local.unsubmittedSegments[this.props.videoID];
            Config.forceLocalUpdate("unsubmittedSegments");
        }
    }

    exportSegments(): void {
        this.copyToClipboard(exportTimes(Config.local.unsubmittedSegments[this.props.videoID]));
    }

    exportSegmentsAsURL(): void {
        this.copyToClipboard(
            `https://youtube.com/watch?v=${this.props.videoID}${exportTimesAsHashParam(
                Config.local.unsubmittedSegments[this.props.videoID]
            )}`
        );
    }

    copyToClipboard(text: string): void {
        navigator.clipboard
            .writeText(text)
            .then(() => {
                showMessage(chrome.i18n.getMessage("CopiedExclamation"), "warning");
            })
            .catch(() => {
                showMessage(chrome.i18n.getMessage("copyDebugInformationFailed"), "warning");
            });
    }
}

export default UnsubmittedVideoListItem;
